<template>
  <div class="app-container">
    <header>
      <Header />
    </header>
    <main>
      <BaseInfo v-if="allData" :datas="allData" />
      <WholeInfo v-if="allData" :datas="allData" />
      <el-tabs
        type="border-card"
        style="margin-top: 20px"
        v-model="activeIndex"
      >
        <el-tab-pane
          v-for="item in tableData.data.sinkCatalogs"
          :key="item"
          :label="item"
        >
          <Details
            :key="activeIndex"
            v-if="allData"
            :datas="allData"
            :keyWord="item"
          />
          <wholeDetails v-if="allData" :datas="allData" :keyWord="item" />
        </el-tab-pane>
        <!-- <el-tab-pane label="配置管理">
          <Details v-if="allData" :datas="allData" />
          <wholeDetails v-if="allData" :datas="allData" />
        </el-tab-pane>
        <el-tab-pane label="角色管理">
          <Details v-if="allData" :datas="allData" />
          <wholeDetails v-if="allData" :datas="allData" />
        </el-tab-pane>
        <el-tab-pane label="定时任务补偿">
          <Details v-if="allData" :datas="allData" />
          <wholeDetails v-if="allData" :datas="allData" />
        </el-tab-pane> -->
      </el-tabs>
    </main>
  </div>
</template>

<script>
import Header from "./component/header.vue";
import { dataTaskLogGetInfo } from "@/api/console/tasks.js";
import BaseInfo from "./component/baseInfo.vue";
import Details from "./component/details.vue";
import WholeInfo from "./component/wholeInfo.vue";
import wholeDetails from "./component/wholeDetails.vue";

export default {
  components: { Header, BaseInfo, WholeInfo, Details, wholeDetails },
  data() {
    return {
      activeIndex: "0",
      tableData: {},
      allData: null,
      menuItems: [
        { label: "表评估结果", key: "tableResult" },
        { label: "视图评估结果", key: "viewResult" },
        { label: "触发器评估结果", key: "triggerResult" },
        { label: "存储过程评估结果", key: "procedureResult" },
        { label: "索引评估结果", key: "indexResult" },
        { label: "序列评估结果", key: "seqResult" },
        { label: "同义词评估结果", key: "synonymResult" },
        { label: "函数评估结果", key: "functionResult" },
        { label: "类型评估结果", key: "typeResult" },
      ],
    };
  },
  created() {},
  async mounted() {
    const res = await dataTaskLogGetInfo({
      id: this.$route.query.id,
    });
    this.allData = res.data;
    this.tableData = JSON.parse(res.data.taskResult);
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
a {
  width: 100%;
}

.app-container {
  padding: 0;
  background-color: #f3f3f4;
  min-height: 100%;

  main {
    margin: 0 auto;
    margin-top: 70px;
    width: 95%;
    padding: 10px 0;
  }
}
</style>
